<template>
  <div class="chat-list">
    <div class="chat-header">
      <h3 class="header-title">聊天记录</h3>
      <button class="new-chat-btn" @click="createNewChat" title="新建聊天">
        <PlusIcon />
      </button>
    </div>

    <div class="chat-items" ref="chatItemsContainer">
      <div
        v-for="chat in chats"
        :key="chat.id"
        :class="['chat-item', { active: chat.id === currentChatId }]"
        @click="selectChat(chat.id)"
      >
        <div class="chat-title">
          {{ chat.title }}
        </div>
        <!-- <div class="chat-time">
          {{ formatTime(chat.created_at) }}
        </div> -->
        <button class="delete-btn" @click.stop="deleteChat(chat.id)" title="删除聊天">
          <DeleteIcon />
        </button>
      </div>

      <!-- 空状态 -->
      <div v-if="chats.length === 0" class="empty-state">
        <div class="empty-icon">
          <EmptyChatIcon />
        </div>
        <div class="empty-text">暂无聊天记录</div>
        <button class="start-chat-btn" @click="createNewChat">开始新聊天</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DeleteIcon, EmptyChatIcon, PlusIcon } from '@/icons/chat';
import { useChatStore } from '@/stores/chat';
import { Modal } from 'ant-design-vue';
import { computed, nextTick, onMounted, ref, watch } from 'vue';

const chatStore = useChatStore();

// 滚动容器引用
const chatItemsContainer = ref<HTMLElement>();

// 计算属性
const chats = computed(() => chatStore.chatList);
const currentChatId = computed(() => chatStore.currentChatId);

// 选择聊天
const selectChat = (id: number | string) => {
  chatStore.switchChat(id);
};

// 创建新聊天
const createNewChat = async () => {
  try {
    await chatStore.createNewChat();
    console.log('创建新聊天成功');
    // 创建成功后滚动到底部显示新聊天
    scrollToBottom();
  } catch (error) {
    console.error('创建聊天失败:', error);
  }
};

// 删除聊天
const deleteChat = (id: number | string) => {
  Modal.confirm({
    title: '删除会话',
    content: `确定要删除当前会话吗？`,
    okText: '删除',
    cancelText: '取消',
    okType: 'danger',
    onOk: async () => {
      // 这里可以调用 chatStore 的删除方法
      await chatStore.deleteChat(id);
      console.log('删除会话:', id);
    },
    onCancel() {
      console.log('取消删除会话');
    },
  });
};

// 格式化时间
const formatTime = (date?: Date) => {
  if (!date) return '';

  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (days === 0) {
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
    });
  } else if (days === 1) {
    return '昨天';
  } else if (days < 7) {
    return `${days}天前`;
  } else {
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
    });
  }
};

// 滚动到底部
const scrollToBottom = () => {
  if (chatItemsContainer.value) {
    nextTick(() => {
      chatItemsContainer.value!.scrollTop = chatItemsContainer.value!.scrollHeight;
    });
  }
};

// 监听聊天列表变化，滚动到底部
watch(
  () => chats.value.length,
  () => {
    scrollToBottom();
  }
);

// 组件挂载后滚动到底部
onMounted(() => {
  scrollToBottom();
});
</script>

<style scoped lang="less">
.chat-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;

  .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;

    .header-title {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin: 0;
    }

    .new-chat-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: none;
      background: #667eea;
      color: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;

      &:hover {
        background: #5a67d8;
        transform: scale(1.05);
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }

  .chat-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;

    .chat-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 12px 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: 1px solid #f1f5f9;

      &:hover {
        background: #f1f5f9;

        .delete-btn {
          opacity: 1;
        }
      }

      &.active {
        background: #e2e8f0;
        border-left: 3px solid #667eea;

        .chat-title {
          color: #667eea;
          font-weight: 600;
        }
      }

      .chat-title {
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 30px);
        line-height: 1.4;
      }

      .chat-time {
        font-size: 12px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .delete-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        color: #ef4444;
        cursor: pointer;
        opacity: 0;
        transition: all 0.2s ease;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;

        &:hover {
          background: rgba(239, 68, 68, 0.1);
          transform: scale(1.1);
        }

        &:active {
          transform: scale(0.9);
        }
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      text-align: center;

      .empty-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
        opacity: 0.5;
        color: #94a3b8;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .empty-text {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 16px;
      }

      .start-chat-btn {
        padding: 8px 16px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: #5a67d8;
          transform: translateY(-1px);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }

  /* 滚动条样式 */
  .chat-items::-webkit-scrollbar {
    width: 4px;
  }

  .chat-items::-webkit-scrollbar-track {
    background: transparent;
  }

  .chat-items::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;

    &:hover {
      background: #94a3b8;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-list {
    .chat-header {
      padding: 12px 16px;

      .header-title {
        font-size: 14px;
      }

      .new-chat-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }
    }

    .chat-items {
      .chat-item {
        padding: 10px 16px;

        .chat-title {
          font-size: 13px;
          max-width: calc(100% - 25px);
        }

        .chat-time {
          font-size: 11px;
        }

        .delete-btn {
          width: 20px;
          height: 20px;
          top: 10px;
          right: 10px;
          font-size: 10px;
        }
      }

      .empty-state {
        padding: 30px 16px;

        .empty-icon {
          width: 40px;
          height: 40px;
        }

        .empty-text {
          font-size: 13px;
        }

        .start-chat-btn {
          padding: 6px 12px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
